import React, { useState, useEffect, useCallback } from 'react'
import { Col, Form, Input, Button, Tabs, List, Row, message, Table, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import {
  fetchMiniList,
  fetchMiniCode,
  fetchTemplateList,
} from '@/services/setting/wechat'
import styles from './miniProgram.less'
import { supplierId } from '@/utils/utils'

const { TabPane } = Tabs;
const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))

const MiniProgram = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState({})
  const [authInfo, setAuthInfo] = useState({})
  const [codeUrl, setCodeUrl] = useState('')
  const [temple, setTemple] = useState([])

  useEffect(() => {
    init({
      bindingType: 1,
      supplierId: "1072" || supplierId
    })
    fetchCode({
      "supplierId": "1072" || supplierId,
      "supplierType": 2,
      "miniProgramACodeVo": {
          "page": "pages/supplierIndex/supplierIndex",
          "scene": "s=1"
      }
    })
  }, [])

  const init = async params => {
    const res = await fetchMiniList(params)
    if (res.code == 0) {
      setData(res.data)
      setAuthInfo(res.data && res.data.authorizer_info)
    } else {
      message.warning(res.msg)
    }
  }

  const fetchCode = async params => {
    const res = await fetchMiniCode(params)
    res.code == 0 ? setCodeUrl(res.data) : message.warning(res.msg)
  }

  const messageTemp = async () => {
    const res = await fetchTemplateList()
    setTemple(res.data)
  }

  // 按钮处理
  const handleBtn = type => {
    
  }

  const handleTabs = k => {
    k == 2 && messageTemp()
  }
  
  const renderMiniBinding = () => {
    return (
      authInfo && <>
        <Row className={styles.border}>
          <Col span={6}>小程序名称</Col>
          <Col span={16}>{authInfo.nick_name}</Col>
        </Row>
        <Row className={styles.border}>
          <Col span={6}>授权方公众号的原始ID</Col>
          <Col span={16}>{authInfo.user_name}</Col>
        </Row>
        <Row className={styles.border}>
          <Col span={6}>授权方公众号头像</Col>
          <Col span={16}><img src={authInfo.head_img} style={{width: 50}}/></Col>
        </Row>
        <Row className={styles.border}>
          <Col span={6}>授权方认证类型</Col>
          <Col span={16}>微信认证</Col>
        </Row>
        <Row className={styles.border}>
          <Col span={6}>授权方公众号类型</Col>
          <Col span={16}>
            <span>
              <span>服务号&nbsp;&nbsp;</span>
              <span><b>请尽量使用</b>有支付权限的服务号<b>类型的公众号，以避免</b>跨号支付<b>引起的二次扫码支付，影响支付体验</b></span></span>
          </Col>
        </Row>
        <Row className={styles.border}>
          <Col span={6}>授权方appid</Col>
          <Col span={16}>{data && data.authorization_info && data.authorization_info.authorizer_appid}</Col>
        </Row>
        <Row className={styles.border}>
          <Col span={6}>授权方access_token</Col>
          <Col span={16}>{data && data.authCode}</Col>
        </Row>
        <Row className={styles.border}>
          <Col span={6}>授权方refresh_token</Col>
          <Col span={16}>{data && data.authorization_info && data.authorization_info.authorizer_refresh_token}</Col>
        </Row>
        <Row className={styles.border}>
          <Col span={6}>公众号解绑</Col>
          <Col span={16}><Button type='primary'>解绑绑定</Button></Col>
        </Row>
        <Row className={styles.border}>
          <Col span={6}>小程序二维码</Col>
          <Col span={16}><img src={codeUrl} sytle={{width: 100}} /></Col>
          <Col offset={6}><Button style={{marginTop: 20}}><a href={codeUrl} target='_blank'>保存二维码</a></Button></Col>
        </Row>
      </>
    )
  }

  const renderTemple = useCallback(() => {
    const col = [
      {
        title: '模板编号',
        dataIndex: 'templateCode',
        key: 'templateCode',
      },
      {
        title: '模板名称',
        dataIndex: 'title',
        key: 'title',
      },
      {
        title: '模板ID',
        dataIndex: 'templateId',
        key: 'templateId',
      },
    ]
    return (
      <>
        <Table
          title={() => <b>消息模板列表</b>}
          columns={col}
          dataSource={temple}
        />
      </>
    )
  }, [])
  return (
    <PageHeaderWrapper>
      {/* <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} /> */}
      <RenderButtom click={handleBtn} />
      <Tabs onChange={handleTabs}>
        <TabPane tab="小程序绑定" key="1">
          {renderMiniBinding()}
        </TabPane>
        <TabPane tab="消息模板" key="2">
          {renderTemple()}
        </TabPane>
      </Tabs>
    </PageHeaderWrapper>
    )
}

export default Form.create()(MiniProgram)
